<template>
  <div>
    <!-- <header-vue /> -->

    <div style="background: #f7f7f7">
      <div class="container">
        <div class="main">
          <router-view />
        </div>
        <!-- 左侧 -->
        <div class="slider">
          <div class="group-item">
            <dt>
              <a href="">
                <i style="color: #cc6633" class="iconfont">&#xe70e;</i>
                <b>我的悠哉</b>
              </a>
            </dt>
            <dt>
              <i style="color: #cc6633" class="iconfont">&#xe653;</i>
              <b>个人中心</b>
            </dt>
            <dd>
              <router-link to="/order/myorder">我的订单</router-link>
            </dd>
            <dd>
              <router-link to="/order/exchangeorder">积分兑换</router-link>
            </dd>
            <dd>
              <router-link to="/order/MyCollection">我的收藏</router-link>
            </dd>
            <dd>
              <router-link to="/order/CommonTraveller"
                >常用旅客信息</router-link
              >
            </dd>
            <dd>
              <router-link to="/order/MyActivity">我的会员活动</router-link>
            </dd>
            <dt>
              <i style="color: #cc6633" class="iconfont">&#xeb60;</i>
              <b>我的资产</b>
            </dt>
            <dd>
              <router-link to="/order/MyIntegral">我的积分</router-link>
            </dd>
            <dd>
              <router-link to="/order/MyDiscountCoupon">我的优惠券</router-link>
            </dd>
            <dd>
              <router-link to="/order/MyBeckoningCard">我的心动卡</router-link>
            </dd>
            <dt>
              <i style="color: #cc6633" class="iconfont">&#xe64b;</i>
              <b>账号管理</b>
            </dt>
            <dd>
              <router-link to="/order/PersonalData">个人资料</router-link>
            </dd>
          </div>
        </div>
        <div class="clear" style="clear: both"></div>
      </div>
      <div class="clear" style="clear: both"></div>
    </div>
    <!-- <footer-vue /> -->
  </div>
</template>

<script>
import FooterVue from "@/components/FooterVue.vue";
import HeaderVue from "@/components/HeaderVue.vue";
export default {
  components: { HeaderVue, FooterVue },
  data() {
    return {
      key: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  color: black;
}
.router-link-active {
  background: #cc6633;
  color: white !important;
}
.container {
  > .main {
    width: 858px;
    padding: 20px 40px;
    border-radius: 6px;
    margin-left: 20px;
    float: right;
    min-height: 700px;
    background: #fff;
  }
  width: 1140px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 30px;

  > .slider {
    background: #fff;
    border-radius: 15px;
    float: left;
    width: 180px;
    padding-top: 10px;
    > .group-item {
      padding-bottom: 10px;
      font-size: 14px;
      > dt {
        cursor: default;
        margin: 0 20px;
        padding: 20px 0 10px 5px;
        position: relative;
      }
      > dd {
        > a {
          color: #666;
          display: block;
          margin-top: 1px;
          padding: 10px 25px 10px 53px;
          position: relative;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
